<div id="presentacion">
    <?php $sumados=0.00;
    $sumados1=0.00;
    $sumados2=0.00;
    $sumados3=0.00;?>
    <h1>Listado de Pagos</h1>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script>
            function recuperarAlumnos(page)
           {
               try
               {                 
                    var pasajero = document.getElementById("pasajero").value;
                    var habitacion = document.getElementById("habitacion").value;
                    var desde= document.getElementById("desde").value;
                    var hasta = document.getElementById("hasta").value;
                    
                    var data;
                    if(document.getElementById("todos").checked){
                        data = "todos=1";
                    }
                    else
                    {
                        data = "todos=0";
                    }
                   
                    data = data + "&pasajero="+pasajero+"&habitacion="+habitacion+"&desde="+desde+"&hasta="+hasta  
                            + "&limite=" + document.getElementById("mostrar").value 
                            + "&pagina=" + page;
                    
                   $.ajax(
                       {
                           // puede ser "get" y "post"
                           type: "post",
                           // el módulo que hará la búsqueda
                           url: "<?php echo base_url() . 'cpago/buscarAjax';?>",
                           // los datos para la consulta
                           data: data,
                           // este no viaja al servidor
                           //context : { "cedula" : cedula },
                           // que hacer si esto falla
                           error: callback_error,
                           // que hacer si funciona 
                           success: recuperarConsumos
                       });
               }
               catch(ex)
               {
                   alert(ex.description);
               }
           }
           
           function callback_error(XMLHttpRequest, textStatus, errorThrown)
            {
                // en ambientes serios esto debe manejarse con mucho cuidado, 
                // aquí optamos por una solución simple
                alert(errorThrown);
            }
            
            
            function procesarRespuesta(ajaxResponse)
            { 
                // observa que aquí asumimos que el resultado es un objeto 
                // serializado en JSON, razón por la cual tomamos este dato
                // y lo procesamos para recuperar un objeto que podamos
                // manejar fácilmente
                if (typeof ajaxResponse == "string")
                    ajaxResponse = $.parseJSON(ajaxResponse);
                return ajaxResponse;
            }
            
            function recuperarConsumos(ajaxResponse, textStatus)
            {
                var alumnos = procesarRespuesta(ajaxResponse);
                if (!alumnos)
                {
                    // no se encontraron registros :(
                    return;
                }

                // recupera la instancia de la tabla en donde colocaremos los 
                // registros que recuperamos y elimina todos salvo el primero, 
                // que es donde se encuentra el encabezado de la tabla
                var tabla = document.getElementById('pagos');
               while(tabla.hasChildNodes())
               tabla.removeChild(tabla.firstChild);	
        

                // ahora, para cada registro que recuperamos
                var alumno;
                
                var fila;
                var columna;
                var img;
                var a;
                var monto_total = parseFloat('0.0');
                var monto_senia = parseFloat('0.0');
                var monto_consumo = parseFloat('0.0');
                var monto_reserva = parseFloat('0.0');
                for (var idx in alumnos)
                {
                    fila = document.createElement("tr");
                    alumno = alumnos[idx];
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.id));
                    fila.appendChild(columna);
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.habitacion));
                    fila.appendChild(columna);
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.apellido));
                    fila.appendChild(columna);
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.fecha_salida));
                    fila.appendChild(columna);
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.dias));
                    fila.appendChild(columna);
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.monto_reserva));
                    fila.appendChild(columna);
                    
                    monto_reserva = monto_reserva + parseFloat(alumno.monto_reserva);
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.late_checkout));
                    fila.appendChild(columna);
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.monto_senia));
                    fila.appendChild(columna);
                    
                    monto_senia = monto_senia + parseFloat(alumno.monto_senia);
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.monto_consumo));
                    fila.appendChild(columna);
                    
                    monto_consumo = monto_consumo + parseFloat(alumno.monto_consumo);
                    
                    columna = document.createElement("td");
                    columna.appendChild(document.createTextNode(alumno.total));
                    fila.appendChild(columna);
                    
                    monto_total = monto_total + parseFloat(alumno.total);
                    
                    
                    columna= document.createElement("td");
                    a=document.createElement("a");
                    a.setAttribute("href","<?php echo base_url() . 'cpago/modificar/';?>" + alumno.id);
                    img = document.createElement("img");
                    img.setAttribute("src","<?php echo base_im(); ?>edit.png");
                    a.appendChild(img);
                    
                    columna.appendChild(a);  
                    
                   
                     a=document.createElement("a");
                    a.setAttribute("href","<?php echo base_url() . 'cpago/eliminar/';?>" + alumno.id);
                     img = document.createElement("img");
                    img.setAttribute("src","<?php echo base_im(); ?>delete.png");
                    a.appendChild(img);
                    
                    columna.appendChild(a);  
                    
                    fila.appendChild(columna);              
                    
                
                    tabla.appendChild(fila);                  
                }
                $('#cobrar').attr('value',monto_total);
                $('#monto_senia').attr('value',monto_senia);
                $('#monto_consumo').attr('value',monto_consumo);
                $('#monto_reserva').attr('value',monto_reserva);
                
          }
          
          
          function cargarBusqueda(page)
          {
              recuperarAlumnos(page);
              paginar_ajax();
          }
     </script> 
    
    <script>
     
               function paginar_ajax()
           {
               try
               {                 
                    var pasajero = document.getElementById("pasajero").value;
                    var habitacion = document.getElementById("habitacion").value;
                    var desde = document.getElementById("desde").value;
                    var hasta = document.getElementById("hasta").value;
                    var data;
                    if(document.getElementById("todos").checked){
                        data = "todos=1";
                    }
                    else
                    {
                        data = "todos=0";
                    }
                   
                    data = data + "&pasajero="+pasajero+"&habitacion="+habitacion+"&desde="+desde+"&hasta="+hasta   
                            + "&limite=" + document.getElementById("mostrar").value;
                    
                   $.ajax(
                       {
                           // puede ser "get" y "post"
                           type: "post",
                           // el módulo que hará la búsqueda
                           url: "<?php echo base_url() . 'cpago/cantPagos';?>",
                           // los datos para la consulta
                           data: data,
                           // este no viaja al servidor
                           //context : { "cedula" : cedula },
                           // que hacer si esto falla
                          // error: callback_error,
                           // que hacer si funciona 
                           success: paginas
                       });
               }
               catch(ex)
               {
                   alert(ex.description);
               }
           }
           
//           function callback_error(XMLHttpRequest, textStatus, errorThrown)
//            {
//                // en ambientes serios esto debe manejarse con mucho cuidado, 
//                // aquí optamos por una solución simple
//                alert(errorThrown);
//            }
            
            
//            function procesarRespuesta(ajaxResponse)
//            { 
//                // observa que aquí asumimos que el resultado es un objeto 
//                // serializado en JSON, razón por la cual tomamos este dato
//                // y lo procesamos para recuperar un objeto que podamos
//                // manejar fácilmente
//                if (typeof ajaxResponse == "string")
//                    ajaxResponse = $.parseJSON(ajaxResponse);
//                return ajaxResponse;
//            }
            
            function paginas(ajaxResponse, textStatus)
            {
                var alumnos = ajaxResponse;
//                if (!alumnos)
//                {
//                    // no se encontraron registros :(
//                    return;
//                }

                // recupera la instancia de la tabla en donde colocaremos los 
                // registros que recuperamos y elimina todos salvo el primero, 
                // que es donde se encuentra el encabezado de la tabla
                var pag = document.getElementById('paginas');
                var cant_mostrar = document.getElementById('mostrar').value;
                var cant_pag =  parseInt(alumnos / cant_mostrar);
               while(pag.hasChildNodes())
               pag.removeChild(pag.firstChild);	
        
               var a;
               
               for(var i=1;i<=cant_pag;i++)
               {
                    a = document.createElement('a');
                  if(i===1)
                  {
                      a.setAttribute('class','pagActual');
                      a.setAttribute('onclick','');
                  }
                  else
                  {
                      a.setAttribute('class','pag');
                      a.setAttribute('onclick','cargarPagina(this)');
                  }         
                  
                  a.setAttribute('href','#');
                  a.setAttribute('value',i);
                  a.appendChild(document.createTextNode(i));
                    
                   
                   pag.appendChild(a);
               }

              
          }
          
          function cargarPagina(enlace)
          {
              var padre = document.getElementById('paginas');
              var hijos = padre.getElementsByTagName('a');
              for(var j = 0; j< hijos.length;j++)
               {
                   hijos[j].setAttribute('onclick','cargarPagina(this)');
                   hijos[j].setAttribute('class','pag');
               } 
              enlace.setAttribute('class','pagActual');
              enlace.setAttribute('onclick','');
                            
              var temp = enlace.getAttribute('value');
              recuperarAlumnos(temp);
          }
                
     </script> 
    
    
      <!--
    FIN- Prueba de carga de datos con ajax y json
    -->
    <div>
   
    	<p>
                <label for="pasajero">Pasajero: </label>
                <input id="pasajero" name="pasajero"  class="ui-widget-content"> 
                <label for="habitacion">Habitacion: </label>
                <input id="habitacion" name="habitacion"   class="ui-widget-content">  
                <label for="desde">Fecha Desde: </label>
                <input id="desde" class ="elemento_fecha" value="" name="desde" type="text" class="ui-widget-content" >
                <label for="hasta">Hasta: </label>
                <input id="hasta" class ="elemento_fecha" 
                       <?php  echo  ' value="' .  date("Y-m-d H:i:s") . '" ';   ?>
                       name="hasta" type="text" class="ui-widget-content" >
                
                
                    
                
        </p>
        <p>
                <label for="mostrar">Mostrar: </label>
            <select id="mostrar">
                <option value="15">15</option>
                <option value="30">30</option>
                <option value="50">50</option>            
            </select>
                <input type="checkbox" name="todos" id="todos" >Todos
                <button type="submit" value="Buscar" onclick="cargarBusqueda(1)">Buscar</button>
        </p>
   
        </div>
    <div class="ui-datagrid">
    <table border="1" >
        <thead><tr >
            <th>ID</th>
            <th>HABITACION</th>
            <th>PASAJERO</th>
            <th>FECHA CHECKOUT</th>
            <th>CANT DIAS</th>
            <th>MONTO X DIA</th>
            <th>LATE</th>
            <th>SEÑA</th>
            <th>CONSUMOS</th>
            <th>TOTAL ESTADIA</th>
            <th>ACCION</th>
        </tr></thead> 
        <tbody id="pagos">
    <?php foreach ($listas as $fila)        
    {
        ?>
        
        <tr>
            <td><?php echo $fila->id?></td>
            <td><?php echo $fila->habitacion?></td>
            <td><?php echo $fila->apellido?></td>
            <td><?php echo $fila->fecha_salida?></td>
            <td><?php echo $fila->dias?></td>
            <td><?php echo $fila->monto_reserva?></td>
            <td><?php echo $fila->late_checkout?></td>
            <td><?php echo $fila->monto_senia?></td>
            <td><?php echo $fila->monto_consumo?></td>
            <td><?php echo $fila->total?></td>
            <td>
                <a href="<?php echo base_url() . 'cpago/eliminar/' . $fila->id;?>"><img src="<?php echo base_im(); ?>delete.png"  /></a>
            </td>
                     
        </tr>       
        <?php
    }
        foreach ($listas as $fila){ 
        $sumados = $sumados+($fila->monto_reserva); 
        $sumados1 = $sumados1+($fila->monto_consumo);
        $sumados2 = $sumados2+($fila->total);
        $sumados3 = ($fila->senia);
        
    }
    $sumados2=$sumados2-$sumados3;
    ?>
</tbody>
        </table>
                    <p>
           <label for="cobrar">TOTAL RESERVAS: $</label>
			<input id="monto_reserva" name="monto_reserva" type="text" class="ui-widget-content"
                               <?php echo ' value ="'. round($sumados,2) . '"';?> size="15"> 
           <label for="cobrar">MONTO SEÑA: $</label>
			<input id="monto_senia" name="monto_senia" type="text" class="ui-widget-content"
                               <?php echo ' value ="'. round($sumados3,2) . '"';?> size="15"> 
          <label for="cobrar">TOTAL CONSUMOS: $</label>
			<input id="monto_consumo" name="monto_consumo" type="text" class="ui-widget-content"
                               <?php echo ' value ="'. round($sumados1,2) . '"';?> size="15">
        <label for="cobrar">TOTAL A COBRADO: </label>
			<input id="cobrar" name="cobrar" type="text" class="ui-widget-content"
                               <?php echo ' value ="'. round($sumados2,2) . '"';?> size="15">
    </p>
</div>

</div>
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_js(); ?>jquery-ui-git.css">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 <script src="<?php echo base_js(); ?>jquery.validate.min.js"></script>
 <script src="<?php echo base_js(); ?>jquery-ui-git.js"></script> 
 
 <script type="text/javascript">

        $(function() {
            $('.checked').click(function(e) {
                e.preventDefault();
                var dialog = $('<p>Are you sure?</p>').dialog({
                    buttons: {
                        "Yes": function() {alert('you chose yes');},
                        "No":  function() {alert('you chose no');},
                        "Cancel":  function() {
                            alert('you chose cancel');
                            dialog.dialog('close');
                        }
                    }
                });
            });
        });

    </script>
   <script>
            $(function() {
                var temp = new Date();
                $.datepicker.setDefaults( $.datepicker.regional[ "es" ] );
                $("#desde" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
                $("#desde").datepicker("setDate",new Date(temp.getFullYear(),temp.getMonth(),1));             
            }
            )
            
            $(function() {
                var temp = new Date();
                $.datepicker.setDefaults( $.datepicker.regional[ "es" ] );
                $("#hasta" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
                $("#hasta").datepicker("setDate",new Date(temp.getFullYear(),temp.getMonth() +1,1));             
            }
            )
        </script> 